<template>
  <!-- jq offset,使用两圆圆心距判断超出 -->
  <div class="controller">
    <div id="controller-container">
      <div
        id="controller-ball"
        :style="{ left: cbX + 'px', top: cbY + 'px' }"
        @mousedown="mouseDown"
        @mouseup="reset"
      >
        <div class="ballCenter">{{ `${cbCenter.x},${cbCenter.y}` }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { computed, onMounted, ref, watch } from "vue";
import $ from "jquery"; //原生offset有bug,用jq是offset()
export default {
  setup() {
    //控制器容器
    let ccDom = null;
    let ccR = 0;
    let ccCenter = { x: 0, y: 0 };
    //控制器小球
    let cbDom = null;
    let cbR = 0;
    const cbCenter = ref({ x: 0, y: 0 });
    //根据cb中心坐标来自动计算左上角坐标
    let cbX = computed(() => {
      return cbCenter.value.x - cbR;
    });
    let cbY = computed(() => {
      return cbCenter.value.y - cbR;
    });
    onMounted(() => {
      //获取容器属性
      ccDom = document.querySelector("#controller-container");
      ccR = ccDom.clientWidth / 2;
      ccCenter = { x: ccR, y: ccR };

      //获取小球属性
      cbDom = document.querySelector("#controller-ball");
      cbR = cbDom.clientWidth / 2;
      cbCenter.value = { x: ccR, y: ccR };
    });

    let isMouseDown = false;

    //鼠标移动,控制小球移动
    onMounted(() => {
      $("#controller-container").on("mousemove", function (e) {
        let that = this;
        if (isMouseDown) {
          window.requestAnimationFrame(() => {
            //鼠标坐标,相对于controllerController
            let x = e.pageX - $(that).offset().left;
            let y = e.pageY - $(that).offset().top;

            let l1 = Math.abs(ccCenter.x - x);
            let l2 = Math.abs(ccCenter.y - y);
            //小圆与大圆的圆心距离
            let l = Math.sqrt(Math.pow(l1, 2) + Math.pow(l2, 2));

            //如果在允许的边界范围内,更新中心坐标
            if (0 <= l && l <= ccR - cbR) {
              cbCenter.value = { x, y };
            } else {
              console.log("超出范围");
              reset();
            }
          });
        }
      });
    });

    //鼠标在小球上摁下
    function mouseDown() {
      isMouseDown = true;
    }
    //鼠标在小球上放开,或者鼠标超出container范围
    function reset() {
      console.log("小球位置重置");
      isMouseDown = false;
      //ball位置复位中心处
      cbCenter.value = { x: ccR, y: ccR };
    }
    watch(cbCenter, (cbCenter) => {
      let directionX = cbCenter.x - ccR;
      let directionY = cbCenter.y - ccR;
      let v = Math.sqrt(
        directionX * directionX + directionY * directionY
      ).toFixed(2);
      if (directionX < 0) {
        console.log(`ToLeft`);
      } else if (directionX > 0) {
        console.log(`ToRight`);
      }
      if (directionY < 0) {
        console.log(`ToTop`);
      } else if (directionY > 0) {
        console.log(`ToBottom`);
      }
      console.log(`速度为${v}`);
    });

    return { mouseDown, reset, cbX, cbY, cbCenter };
  },
};
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.controller {
  height: 100vh;
  background-color: #34495e;
  display: flex;
  justify-content: center;
  align-items: center;

  #controller-container {
    width: 200px;
    height: 200px;
    background-color: #d35400;
    border-radius: 50%;
    position: fixed;
    left: 200px;
    bottom: 200px;

    #controller-ball {
      width: 50px;
      height: 50px;
      background-color: #2ecc71;
      border-radius: 50%;
      position: absolute;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>